import React, { useEffect } from "react";
import { confirm, message } from "@ct0/ui";

export default function ConfirmPanel() {
  return (
    <div>
      <h2>confirm 确认提示</h2>
      <ul>
        <li>
          用于执行危险操作（比如删除、重启、发送消息等）时确认当前操作的提示框
        </li>
        <li>
          统一使用 Promise接口: 可以通过 then 在点击确认之后处理其他业务，通过
          catch 在点击取消之后处理其他业务
        </li>
      </ul>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">基础调用</li>
        </ul>
        <button
          onClick={() => {
            confirm("确认删除选中的 IP？")
              .then(() => {
                message.success("删除成功");
              })
              .catch(() => {
                message.error("取消删除");
              });
          }}
        >
          删除
        </button>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { confirm } from '@ct0/ui'`}
              {"\n"}
              {`confirm('确认删除选中的 IP？')
      .then(() => {
        message.success('删除成功');
      })
      .catch(() => {
        message.error('取消删除');
      });`}
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li>自定义配置</li>
        </ul>
        <button
          onClick={() => {
            confirm({
              title: "确认删除选中的 IP？",
              okText: "确认哦",
              cancelText: "取消哦",
              afterClose: () => {
                message.success("弹框关闭");
              },
            })
              .then(() => {
                message.success("删除成功");
              })
              .catch(() => {
                message.error("取消删除");
              });
          }}
        >
          删除
        </button>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { confirm } from '@ct0/ui'`}
              {"\n"}
              {`confirm({
        title: '确认删除选中的 IP？',
        okText: '确认哦',
        cancelText: '取消哦',
        afterClose: () => {
          message.success('弹框关闭');
        },
      })
        .then(() => {
          message.success('删除成功');
        })
        .catch(() => {
          message.error('取消删除');
        });`}
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>title</td>
            <td>弹框标题</td>
            <td>string | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>content</td>
            <td>弹框内容</td>
            <td>React.ReactNode | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>okText</td>
            <td>自定义弹框确认按钮文本</td>
            <td>React.ReactNode | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>cancelText</td>
            <td>自定义弹框取消按钮文本</td>
            <td>React.ReactNode | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>showCancel</td>
            <td>是否显示取消按钮</td>
            <td>boolean | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>icon</td>
            <td>自定义弹框图标icon</td>
            <td>React.ReactNode | undefined</td>
            <td>-</td>
          </tr>
          <tr>
            <td>afterClose</td>
            <td>弹框图标关闭之后的回调</td>
            <td>() =&gt; void</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
